<template>
    <div>
        <el-card style="">
          <div style="display: flex;justify-content: space-between;">
              <div style="font-size: 24px;font-weight: bold;">轮播图管理</div>
              <div><el-button type="primary" @click="dialog_add = true">+ 添加</el-button></div>
          </div>
          <div style="padding:0 20px">
            <div v-for="(item,index) in dataList" style="margin-top: 30px;">
                <div style="font-size:14px">
                    轮播图一：
                </div>
                <div style="display:flex;align-items: center;margin-top:20px">
                    <div style="font-size:14px">
                        图片
                    </div>
                    <div style="margin-left:20px">
                        <el-image style="width: 100px; height: 100px" :src="baseURL_dev+item.slideshowImageUrl" fit="fit" />
                    </div>
                    <div style="margin-left: 30px;display: flex;align-items: center;">
                      <div style="margin-right: 10px;font-size: 14px;width: 80px;">
                        标题
                      </div>
                      <el-input v-model="item.slideshowTitle" style="width: 240px;border-radius: 0" placeholder=""></el-input>
                    </div>
                    <div style="margin-left: 30px;display: flex;align-items: center;">
                      <div style="margin-right: 10px;font-size: 14px;width: 80px;">
                        跳转链接
                      </div>
                      <el-input v-model="item.slideshowSkipRoute" style="width: 240px;border-radius: 0" placeholder=""></el-input>
                    </div>
                    <div style="margin-left: 50px;">
                      <el-button @click="del(item)"><el-icon :size="16" color="red"><RemoveFilled /></el-icon><span style="margin-left: 5px;">移除</span></el-button>
                    </div>
                </div>
            </div>
          </div>
        </el-card>

        <el-dialog v-model="dialog_add" title="新增" width="800">
        <div>
          <div style="margin-left: 30px;display: flex;align-items: center;">
            <div style="margin-right: 10px;font-size: 14px;width: 120px;">
              请选择轮播图类型
            </div>
            <el-select v-model="addForm.slideshowType" placeholder="Select" style="width: 240px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
            <div style="margin-right: 10px;font-size: 14px;width: 120px;">
              请填写标题
            </div>
            <el-input v-model="addForm.slideshowTitle" style="width: 240px;border-radius: 0" placeholder=""></el-input>
          </div>
          <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
            <div style="margin-right: 10px;font-size: 14px;width: 120px;">
              请填写跳转链接
            </div>
            <el-input v-model="addForm.slideshowSkipRoute" style="width: 240px;border-radius: 0" placeholder=""></el-input>
          </div>
          <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
            <div style="margin-right: 10px;font-size: 14px;width: 120px;">
              图片
            </div>
            <div>
                <el-upload
                  class="avatar-uploader"
                  :action="baseURL_dev+'/common/upload'"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                >
                  <img v-if="addForm.slideshowImageUrl" :src="baseURL_dev+addForm.slideshowImageUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </div>
          </div>
          <!-- <div style="margin-left: 30px;display: flex;margin-top: 20px">
            <div style="margin-right: 10px;font-size: 14px;width: 80px;">
              内容
            </div>
            <div style="border: 1px solid #ccc;flex: 1;">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="addorRef"
                mode="default"
              />
              <Editor
                style="height: 300px; overflow-y: hidden;"
                v-model="addForm.slideshowContent"
                :defaultConfig="addorConfig"
                mode="default"
                @onCreated="handleCreated1"
              />
            </div>
          </div> -->
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialog_add = false">取消</el-button>
            <el-button type="primary" @click="addUser()">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
    import '@wangeditor/editor/dist/css/style.css' // 引入 css
    import { baseURL_dev } from '../../config/baseUrl'
    import { onBeforeUnmount, shallowRef,onMounted,ref } from 'vue'
    import { ElMessage, ElMessageBox,ElNotification } from 'element-plus'
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    import { Plus } from '@element-plus/icons-vue'
    import type { UploadProps } from 'element-plus'
    import { $SlideshowList,$SlideshowAdd,$SlideshowEdit,$SlideshowDel } from '../../api/base'

    onMounted(()=>{
      loadList()
    })

    let dataList = ref([])
    let form = ref({})
    form.caseName = ''
    form.pageNum = 1,
    form.pageSize = 10

    let dialog_add = ref(false)
    let dialog_edit = ref(false)
    let addForm = ref({})
    let editForm = ref({})

    const loadList = async ()=>{
      console.log(form.value)
      let ret = await $SlideshowList(form.value)
      console.log(ret)
      dataList.value = ret.rows
    }

    const addUser = async ()=>{
      let res = ref({})
      res = await $SlideshowAdd(addForm.value)
      console.log('res',res)
      if(res.code==0){
        loadList()
        dialog_add.value = false
      }
    }

    const del = async (row)=>{
      console.log(row)
      ElMessageBox.confirm(
        '您确定要删除这条数据吗？',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(async() => {
          let del = {}
          del.slideshowIds = row.slideshowId
          console.log('del',del)
          let res = ref({})
          res = await $SlideshowDel(del)
          console.log('res',res)
          if(res.code==0){
            // ElNotification({
            //     title:'通知',
            //     message: res.message,
            //     type:'success'
            // })
            loadList()
          }
        })
        .catch(() => {
        })
    }

    const editUser = async ()=>{
      let res = ref({})
      res = await $SlideshowEdit(editForm)
      console.log('res',res)
      if(res.code==0){
        loadList()
        dialog_edit.value = false
      }
    }

    const edit = async (row)=>{
      console.log(row)
      editForm = row
      dialog_edit.value = true
    }

    const imageUrl = ref('')

    const handleAvatarSuccess: UploadProps['onSuccess'] = (
      response,
      uploadFile
    ) => {
      console.log('response',response)
      console.log('uploadFile',uploadFile)
      addForm.value.slideshowImageUrl = response.fileName
      // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    }

    const addorRef = shallowRef()
    const addorConfig = { placeholder: '请输入内容...' }
    const handleCreated1 = (editor) => {
      addorRef.value = editor // 记录 editor 实例，重要！
    }

    const editorRef = shallowRef()
    const editorConfig = { placeholder: '请输入内容...' }
    const handleCreated2 = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }

    const value = ref('')

    const options = [
      {
        value: '0',
        label: '内链',
      },
      {
        value: '1',
        label: '外链',
      }
    ]
  </script>
  
  <style scoped lang="less">
  .avatar-uploader .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  </style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
</style>